<template>
  <view class="trip-list">
    <!--    <block v-for="(item, index) in trips" :key="index">-->
    <view class="list">
      <view class="item" v-for="(item, index) in list">
        <view class="header">
          <view class="car-type">{{ item.carType }}</view>
          <view class="status">{{ item.status }}</view>
        </view>
        <view class="top">
          <view class="top-s">
            <view><image src="/static/images/tabbar/time-fill.png"></image></view>
            <view class="time">{{ item.startTime }}</view>
            <view class="price">￥{{ item.allPrice }}</view>
          </view>

          <view class="start"><span class="s1">·</span>{{ item.beginName }}</view>
          <view class="end"><span class="s2">·</span>{{ item.finishName }}</view>
        </view>
        <view class="actions">
          <view></view>
          <view><button class="option-item1" @click="goToChat()">联系师傅</button></view>
          <view><button class="option-item2" @click="closeOrder(item.id)">取消订单</button></view>
        </view>
      </view>
    </view>

    <!--    </block>-->
  </view>
</template>

<script>

import {getOrderInfo,closeOrder} from "@/api/durian/order/orderInfo.js";

export default {
  data() {
    return {
      list: [],
    }
  },
  onLoad(){
    this.getOrderInfo();
  },
  methods: {
    getOrderInfo() {
      getOrderInfo().then(res=>{
        this.list=res.rows;
      })
    },
    goToChat(){
      console.log("联系师傅");
      this.$tab.navigateTo('/pages/mine/chat/index')
    },
    closeOrder(orderId){
      console.log("取消订单");
      this.$modal.confirm('司机正在赶来，确定取消该订单吗？').then(() => {
        closeOrder(orderId).then(res=>{
          if (res.code==200 || res.code==0){
            this.$modal.showToast('取消成功');
          }
          this.getOrderInfo();
        })
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;

  .list {


    .item {
      background: #fff;
      padding: 24rpx;
      border-radius: 20rpx;
      margin-top: 24rpx;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx;
        border-bottom: 1px solid #e5e5e5;

        .car-type, {
          font-size: 16px;
        }

        .status, {
          color: rgb(76, 205, 186);
          font-size: 15px;
        }
      }

      .top {
        margin-top: 16rpx;

        .top-s {

          image {
            margin-left: 4px;
            width: 20rpx;
            height: 20rpx;

          }

          display: flex;
          //justify-content: space-between;
          align-items: center;
          padding: 3px;


          .time {
            font-size: 13px;
            color: #999;
            padding-left: 14px;
          }

          .price {
            font-size: 14px;
            color: #2f2d2d;
            margin-left: 160px;
          }
        }

        .start, .end {
          padding: 3px;
          font-size: 13px;
          color: #999;
          display: flex;
          align-items: center; /* 垂直居中 */
          height: 30px; /* 视图的高度 */
        }

        .s1 {
          font-size: 50px;
          color: #21dd71;
          margin-right: 10px;
        }

        .s2 {
          font-size: 50px;
          color: #f34c05;
          margin-right: 10px;
        }
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 8rpx;
        height: 30px;

        .option-item1 {
          border-radius: 8rpx;
          background-color: #f5f6f7;
          font-size: 14px;
          border-radius: 20px;
          color: #82848a;
          border: 1px solid #c8c9cc;
        }

        .option-item2 {
          margin-left: 8rpx;
          border-radius: 8rpx;
          font-size: 14px;
          border-radius: 20px;
          // 颜色rgb
          color: rgb(76, 205, 186);
          border: 1px solid rgb(76, 205, 186);;
        }
      }
    }
  }
}

.trip-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

</style>



